import { ProTable } from '@ant-design/pro-components';
import type { SearchConfig } from '@ant-design/pro-table/es/components/Form/FormRender';
import type { ToolBarProps } from '@ant-design/pro-table/es/components/ToolBar';
import { ActionType } from '@ant-design/pro-table/es/typing';
import { ProTableProps } from '@ant-design/pro-table/lib';
import type { GetRowKey } from 'rc-table/lib/interface';
import React, { JSX, useState } from 'react';

interface Column {
  key?: string;
  title: string;
  dataIndex: string;
  valueType?: string;
  valueEnum?: any;
  width?: string | number;
  render?: any;
  search: boolean;
  request: any;
  sorter: boolean;
}
interface Props {
  // request: any;
  headerTitle?: React.ReactNode;
  request: any;
  columns: Column[];
  toolbar?: ToolBarProps<any>['toolBarRender'] | false;
  tableRender?: (
    props: ProTableProps<any, any, any>,
    defaultDom: JSX.Element,
    /** 各个区域的 dom */
    domList: {
      toolbar: JSX.Element | undefined;
      alert: JSX.Element | undefined;
      table: JSX.Element | undefined;
    },
  ) => React.ReactNode;
  search?: boolean | SearchConfig;
  actionRef?: React.Ref<ActionType | undefined>;
  params?: any;
  rowKey?: string | keyof any | GetRowKey<any>;
}
// 定义排序方向的只读元组类型
type SortDirection = readonly ['descend', 'ascend'];

// 使用只读元组来定义排序方向
const sortDirections: SortDirection = ['descend', 'ascend'] as const;
const MyTable: React.FC<Props> = (props) => {
  const {
    request,
    columns,
    toolbar,
    tableRender,
    search = false,
    actionRef,
    headerTitle,
    params,
    rowKey,
  } = props;
  //  const { data, loading, refresh } = useRequest(request, {});
  const formattedSearch = search ? {} : search;
  // 配置对象
  const tableConfig = {
    sortDirections, // 直接使用上面定义的常量
    sorter: true, // 如果有其他逻辑可以在这里添加
  };
  const [activeKey, setActiveKey] = useState<string>('tab1');
  return (
    <ProTable
      rowKey={rowKey}
      config={tableConfig}
      params={params}
      revalidateOnFocus={true}
      pagination={{
        defaultPageSize: 50,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) =>
          `当前第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
      }}
      headerTitle={headerTitle}
      actionRef={actionRef}
      search={formattedSearch}
      toolBarRender={toolbar}
      tableRender={tableRender}
      columns={columns}
      revalidateOnFocus={true}
      request={(params, sorter, filter) => {
        //console.log(sorter,sorter.field,sorter.direction)

        /*   for (const key in sorter) {
     if(sorter[key]){
       sortMaps[key]=sorter[key];
     }
   }*/
        // 使用 Object.entries() 和 reduce() 来创建 sortMaps 对象
        let sortMaps = Object.entries(sorter).reduce(
          (accumulation, [key, value]) => {
            if (value) {
              // 只有当值为真时，才将其添加到积累对象中
              accumulation[key + 'Sort'] = value;
            }
            return accumulation;
          },
          {} as Record<string, any>,
        );

        // 构建请求参数
        const requestData = {
          ...params,
          ...sortMaps,
          // ...其他参数，如筛选条件等
        };

        return request(requestData, sorter, filter);
      }}
      onDataSourceChange={(data) => {
        console.log(data);
      }}
    />
  );
};
export default MyTable;
